<!DOCTYPE html>
<html>
<head>

</head>
<body class="bgf6">
	
	<div class="main-nav">
		<div class="container">
			<ul class="nav-list clearfix">
				<li><a href="">首页</a></li>
			</ul>
		</div>
	</div>
	
	<div class="top-bar">
		<div th:include="common/commonHead :: atmBoHead"></div>
	</div>
	
	<div   class="main-body pb100">
		<div class="container pt10">
			<div class="dflx sbt">
				<div class="body-left bgff">
					<div th:include="common/commonLeft :: atmBoLeft"></div>
				</div>
				
				<div class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							
						</ul>
					</div>
					
					<div id="atmBoApp" class="bgff mt10 pb20 edit-mode">
						<div class="wrap">
                            <div class="box">
                            	<div class="box-title"><span>分配用户角色</span></div>
                            	<div class="mt20 f14">
                            		<div class="two">
                            			<span class="title"><i class="cred">*</i> 用户名</span>
	                					<div class="content">
	                						<input type="text" class="form-control" v-model="username" placeholder="请输入用户名"/>
	                					</div>
	                        			<span class="title">角色</span>
	                					<div class="content">

											<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

											<div style="margin: 15px 0;"></div>
											<el-checkbox-group v-model="checkedRoles" @change="handleCheckedRoleChange">
												<el-checkbox v-for="role in allRoles" :label="role" :key="role">{{role.roleValue}}</el-checkbox>
											</el-checkbox-group>

                						</div>
                            		</div>

                            	</div>
                            </div>
                            
                            <div class="tc mt40">
                            	<button type="button" class="btn btn-primary f12" @click="addUserRole"> 创建 </button>
                            </div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	

	<script>

		var app = new Vue({
			el : '#atmBoApp',
			data : {
				username : '',
				checkAll : true,
				checkedRoles : [],
				allRoles : [],
				isIndeterminate: true
			},

			created : function() {
				//加载所有的角色
				this.loadRoles();
			},

			methods : {
				//处理全选按钮事件
				handleCheckAllChange : function () {
					this.checkedRoles = this.checkAll ? this.allRoles : [];
					this.isIndeterminate = false;
				},

				handleCheckedRoleChange : function (value) {
					let checkedCount = value.length;
					this.checkAll = checkedCount === this.allRoles.length;
					this.isIndeterminate = checkedCount > 0 && checkedCount < this.allRoles.length;
				},

				addUserRole : function () {
					alert(this.username);
					var checkedRoleIds = [];

					for (var i=0; i<this.checkedRoles.length; i++) {
						var role = this.checkedRoles[i];
						alert(role.roleKey);
						checkedRoleIds.push(role.id);
					}

					//发送异步请求
					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/role/addUserRefRole',
						data : {
							username : this.username,
							roleIds : checkedRoleIds
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}

						}
					});
				},

				loadRoles : function () {
					var that = this;

					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/role/loadAllRole',
						data : {
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}

							// this.allRoles = result.data;//error 此this已经不是vue对象了，由于success函数式jquery调用的，所以this是jquery对象。
							// app.allRoles = result.data;
							that.allRoles = result.data;
						}
					});
				}
			}
		});




	</script>
</body>
</html>
